<template>
    <div id="rpm-driver-select">
        <!-- <a-select v-model="defaultValue" style="width: 200px" @change="handleChange" class="search-input">
            <a-select-option v-for="(item, index) in menus" :key="index" :value="item.path">
                <a-icon :type="item.meta.icon" style="margin-right: 3px" />
                {{ item.meta.title }}
            </a-select-option>
        </a-select> -->
        <a-radio-group v-model="defaultValue" button-style="solid" size="large">
            <a-radio-button v-for="(item, index) in menus" :key="index" :value="item.path"
                @click="handleChange(item.path, index)">
                <a-icon :type="item.meta.icon" />
                {{ item.meta.title }}
            </a-radio-button>
        </a-radio-group>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
    name: 'PmsMenu',
    data() {
        return {
            menus: [],
            defaultValue: '',
        }
    },
    watch: {
        menuIndex() {
            this.defaultValue = this.menus[this.menuIndex].path
        },
    },
    computed: {
        ...mapState({
            permissionMenuList: (state) => state.user.permissionList,
            menuIndex: (state) => state.user.menuIndex,
        }),
    },
    created() {
        this.checkRoute()
    },
    methods: {
        handleChange(value, option) {
            if (!this.$route.path.includes(value)) {
                this.$store.dispatch('MenuIndex', option)
                this.$nextTick(() => {
                    this.$router.push({ path: value })
                })
            }
        },
        checkRoute() {
            for (var i = 0; i < this.permissionMenuList.length; i++) {
                // Junvary： 首先判断是不是online的path，如果是，直接commit这个index，跳出循环
                // 因为这个online的界面涉及权限配置，无法添加前面的统一路径
                if (this.permissionMenuList[i].path === '/pms-admin') {
                    if (
                        this.$route.fullPath.substring(0, 10) === '/online/cg'
                        || this.$route.fullPath.substring(0, 10) === '/online/cn'
                        || this.$route.fullPath.substring(0, 10) === '/online/df'
                        || this.$route.fullPath.substring(0, 10) === '/online/co'
                    ) {
                        this.$store.dispatch('MenuIndex', i)
                        break
                    }
                }
                // 如果不是上面的情况，再通过字符串包含方法来判定，属于哪个路由
                if (
                    this.$route.fullPath.indexOf(this.permissionMenuList[i].path) !== -1 ||
                    this.$route.fullPath === this.permissionMenuList[i].path
                ) {
                    this.$store.dispatch('MenuIndex', i)
                    break
                }
            }
            this.menus = this.permissionMenuList
            this.defaultValue = this.menus[this.menuIndex].path
        },
    },
}
</script>

<style lang="less" scoped>
.search-input {
    width: 180px;
    color: inherit;

    /deep/ .ant-select-selection {
        background-color: inherit;
        border: 0;
        border-bottom: 1px solid white;

        &__placeholder,
        &__field__placeholder {
            color: inherit;
        }
    }

    /deep/ .ant-select-arrow {
        color: #ffffff;
    }
}
</style>
